<template>
	<view class="video" :style="blockStyle">
		<view class="video-container" :style="borderRadius" v-bind:class="'ratio-' + mydata.type">
			<video enable-play-gesture play-btn-position='center' v-if="!videoState" ref="myVideo" class="video-div" autoplay :src="mydata.url" :poster="bgimg"></video>
			<!-- <view class="video-div"></view> -->
			<view class="modal" @click="operateVideo" v-if="videoState">
				<vimage style="height: 100%;" v-if="mydata.bg" :src="mydata.bg"></vimage>
				<text class="iconfont el-sc-bofang_huaban"></text>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	data() {
		return {
			videoState: true,
			bgimg: ''
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	mounted() {
		this.bgimg = util.getimgurl(this.mydata.bg);
	},
	computed: {
		blockStyle() {
			let s = 'padding:' + this.mydata.margin.top + 'rpx ' + this.mydata.margin.lr + 'rpx ' + this.mydata.margin.bottom + 'rpx;';
			// s += 'border-radius:' + this.mydata.radius.template_radius + 'px;';

			return s;
		},
		borderRadius() {
			let s = 'border-radius:' + this.mydata.radius.top + 'rpx ' + this.mydata.radius.top + 'rpx ' + this.mydata.radius.bottom + 'rpx ' + this.mydata.radius.bottom + 'rpx ';
			return s;
		}
	},
	methods: {
		operateVideo() {
			if (!this.mydata.url) {
				// this.$message({ message: "暂无视频资源，请查看其他视频！" });
				return false;
			}
			this.videoState = false;
			// #ifndef MP-WEIXIN
				this.$nextTick(() => {
					this.$refs.myVideo.play();
				});
			// #endif
		
		}
	}
};
</script>

<style lang="scss">
.video-container {
	overflow: hidden;
	position: relative;
	&.ratio-1 {
		height: 382rpx;
	}
	&.ratio-2 {
		height: 702rpx;
	}
	&.ratio-3 {
		height: 526rpx;
	}
	.video-div {
		width: 100%;
		height: 100%;
	}
	.modal {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);

		display: flex;

		flex-direction: column;
		z-index: 10;
		.iconfont {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 144rpx;
			width: 144rpx;
			height: 144rpx;
			text-align: center;
			line-height: 144rpx;
			color: #fff;
			opacity: 0.8;
		}
	}
}
</style>
